<template>
	<u-popup class="mm-popup" 
	:closeOnClickOverlay="false"
	:show="showClone" @close="close" :closeable="false" mode="center">
		<view class="m-popup">
			<view class="m-popup-top flex-center fwb">
				{{title}}
				<view class="posa cup" @click="close">
					<u-icon size="20" color="#272536"  name="close"></u-icon>
				</view>
			</view>
			<view class="m-popup-content">
				<scroll-view class="m-popup-content-scroll" scroll-y="true" :show-scrollbar="true">
					<slot></slot>
				</scroll-view> 
			</view>
			<view class="m-popup-bottom flex-end-nowrap" v-if="footer">
				<view class="m-popup-bottom-btn" v-if="footerCancel">
					<u-button plain :style="{color:'#A6B1C8',width:'52px',fontSize:'14px',height:'25px',borderRadius:'2px',padding:'0'}">取消</u-button>
				</view>
				<view class="m-popup-bottom-btn">
					<u-button @click="sure" :style="{color:'#fff',width:'52px',fontSize:'14px',height:'26px', background:'#26bbff',borderRadius:'2px',padding:'0'}">{{okTxt}}</u-button>
				</view>
			</view>
			
		</view>
	</u-popup>
</template>

<script>
	export default {
		name:"m-popup",
		props:{
			title:{
				type:String,
				default:'提示',
			},
			show:{
				type:Boolean,
				default:false,
			},
			footer:{
				type:Boolean,
				default:false,
			},
			footerCancel:{
				type:Boolean,
				default:false,
			},
			okTxt:{
				type:String,
				default:'确定',
			},
		},
		data() {
			return {
				showClone:false,
			};
		},
		watch:{
			show(val){
				this.showClone = val;
			}
		},
		mounted() {
			this.showClone = this.show;
		},
		methods:{
			close(){
				this.showClone = !this.showClone
				this.$emit('close',this.showClone)
			},
			sure(){
				if(this.okTxt != '确定'){
					this.$emit('sure')
					return
					
				}
				this.showClone = !this.showClone
				this.$emit('close',this.showClone)
			},
		}
	}
</script>

<style lang="scss">
	.mm-popup{
		/deep/ .u-popup__content{
			background-color: transparent;
		}
	}
	.m-popup{
		background: #fff;
		overflow: hidden;
		width: 390px;
		max-width: 85vw;
		border-radius: 10rpx;
		border:none; 
		&-top{
			line-height:49px;
			position: relative;
			border-bottom: 1px solid #e7eaef;
			overflow: hidden;
		}
		&-bottom{
			border-top: 1px solid #e7eaef;
			padding: 8px 0;
			padding-right: 10px;
			&-btn{
				margin-left: 10px;
			}
			
		}
		&-content{
			background: #fff;
			&-logo{
				height: 60rpx;
				display: flex;
				align-items: center;
				
				padding-left: 20rpx;
			}
			&-scroll{
				width: calc(100% - 40rpx);
				max-height: calc(100vh - 400rpx);
				padding-left: 20rpx;
				padding-top: 15rpx;
				padding-right: 20rpx;
				padding-bottom: 20rpx;
			}
			
		}
		.posa{
			left: auto;
			top:16rpx;
			right: 22rpx;
		}
	}
</style>